<template>
    <div>
        <el-header>用户分组</el-header>
        <el-button type="primary" @click="addFun" icon="el-icon-plus">添加分组</el-button>
        <el-table
            :data="tableData"
            style="width: 100%"
             v-loading="loading"
            element-loading-text="拼命加载中"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.8)"
        >
            <el-table-column
                prop="id"
                label="ID"
                width="180">
            </el-table-column>
            <el-table-column
                prop="group_name"
                label="分组名称"
                width="180">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="text" size="small">修改</el-button> |
                    <el-button @click="deleteClick(scope.row)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            @current-change="handleCurrentChange"
            :current-page="page"
            :page-size="limit"
            layout="total, prev, pager, next, jumper"
            @prev-click="prevclick"
            @next-click="nextclick"
            :total="total">
        </el-pagination>
        <el-dialog v-if="dialogFormVisible" :title="data.title" :visible.sync="dialogFormVisible">
                <el-form :model="relus2">
                    <el-form-item :label="relus2.title" :label-width="formLabelWidth">
                        <el-input 
                        v-model="relus2.value" 
                        :placeholder="relus2.props.placeholder" 
                        autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <el-button class="btn" type="primary" label-width='100%' @click="elitFun">提 交</el-button>
        </el-dialog>
        <el-dialog v-if="dialogFormVisible1"  :title="data1.title" :visible.sync="dialogFormVisible1">
                <el-form :model="relus">
                    <el-form-item :label="relus.title" :label-width="formLabelWidth">
                        <el-input 
                        v-model="relus.value" 
                        :placeholder="relus.props.placeholder" 
                        autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <el-button class="btn" type="primary" @click="addlistFun">提 交</el-button>
        </el-dialog>
    </div>
</template>
<script>
import {userlist,userelit,userdelete,suerelit,addlistF,queAdd} from '../../api/index'
export default {
    data() {
        return {
            total:0,
            page:1,
            limit:15,
            tableData:[],
            dialogFormVisible:false,
            form:{
                name:''
            },
            data:{},
            formLabelWidth:'120px',
            relus1:{},
            relus2:{},
            loading: true,
            dialogFormVisible1:false,
            data1:[],
            relus:{}
        }
    },
    created() {
        this.list()
    },
    methods: {
        // 点击添加
        addFun(){
            this.loading=true

            addlistF().then((res)=>{
                console.log(res.data);
            this.loading=false

                if(res.data.status==200){
                    this.dialogFormVisible1=true
                    this.data1=res.data.data
                    this.relus=res.data.data.rules[0]
                }
            })
        },
        // 点击添加提交按钮
        addlistFun(){
            queAdd({group_name:this.relus.value}).then((res)=>{
                if(res.data.status==200){
                    this.dialogFormVisible1=false
                    this.$message({
                        type: 'success',
                        message: res.data.msg,
                        duration:1000
                    });
                    this.list()
                }else{
                    this.dialogFormVisible1=false
                    this.$message({
                        type: 'error',
                        message: res.data.msg,
                        duration:1000
                    });
                }
            })
        },
        // 修改分组确认按钮
        elitFun(){
            suerelit({group_name:this.relus2.value,id:this.relus1.value}).then((res)=>{
                if(res.data.status==200){
                    this.dialogFormVisible=false
                    this.$message({
                        type: 'success',
                        message: res.data.msg,
                        duration:1000
                    });
                    this.list()
                }else{
                    this.dialogFormVisible=false
                    this.$message({
                        type: 'error',
                        message: res.data.msg,
                        duration:1000
                    });
                }
            })
        },
        // 上一页
        prevclick(val){
            this.page=val
            this.list()
        },
        // 下一页
        nextclick(val){
            this.page=val
            this.list()
        },
        // 点击页码
        handleCurrentChange(val) {
            this.page=val
            this.list()
        },
        // 获取数据
        list(){
           userlist({page:this.page,limit:this.limit}).then((res)=>{
               if(res.data.status==200){
                   this.loading=false
                   this.tableData=res.data.data.list
                   this.total=res.data.data.count
               }
           })
        },
        // 点击修改
        handleClick(row) {
            this.loading=true
            userelit(row.id).then((res)=>{
                if(res.data.status==200){
                    this.loading=false
                    this.dialogFormVisible=true
                    this.data=res.data.data
                    this.relus1=res.data.data.rules[0]
                    this.relus2=res.data.data.rules[1]
                    console.log(this.relus1);
                }
            })
        },
        // 点击删除
        deleteClick(row){
             let params = {
                id:row.id
            }
            console.log(row.id);
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then((res) => {
                console.log(params);
                userdelete(params).then((res)=>{
                    console.log(res.data);
                     if(res.data.status==200){
                         this.$message({
                            type: 'success',
                            message: '删除成功!',
                            duration:1000
                        });
                        this.list()
                     }else{
                         this.$message({
                            type: 'error',
                            message: '删除失败!',
                            duration:1000
                        });
                     }
                },err => {
                    console.log(err);
                })
                
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除',
                    duration:1000
                });          
            });
        }
   },
}
</script>
<style lang="scss" scoped>
.btn{
    width: 100%;
}
.el-header{
    width: 100%;
    background: white;
    display: flex;
    align-items: center;
}
</style>